<template>
	<view class="publish-page">
		<!-- 1. 自定义顶部导航栏 -->
		<!-- 在 pages.json 中需要配置 navigationStyle: 'custom' -->
		<view class="custom-nav-bar">
			<!-- <uni-icons type="close" size="24" @click="goBack"></uni-icons> -->
			<text class="nav-title">发闲置</text>
			<button class="publish-btn" @click="publish" :disabled="isPublishing">{{ isPublishing ? '发布中...' : '发布' }}</button>
		</view>
        <!-- 顶部导航栏占位，确保内容不被遮挡 -->
        <view :style="{ height: customNavBarHeight + 'px' }"></view>


		<!-- 主要内容区域 -->
		<view class="content-area">
			<!-- 2. 图片上传区域 -->
			<view class="image-upload-section">
				<uni-file-picker
					ref="filePicker"
					v-model="fileList"
					limit="9"
					title="最多选择9张图片"
					fileMediatype="image"
					file-extname="png,jpg"
					mode="grid"
					@select="selectImage"
					@progress="uploadProgress"
					@success="uploadSuccess"
					@fail="uploadFail"
					@delete="deleteImage"
					:action="uploadImageUrl"
                    :headers="uploadHeaders"
				>
				</uni-file-picker>
			</view>

			<!-- 3. 描述输入区域 -->
			<view class="description-section">
				<textarea
					class="description-textarea"
					v-model="description"
					placeholder="描述一下宝贝的品牌型号、货品来源 ..."
					maxlength="-1"
					auto-height
				></textarea>
			</view>

			<!-- 4. 底部建议/工具条 -->
			<!-- <view class="suggestion-bar">
				<view class="suggestion-item" @click="handleAiWrite">
					<uni-icons type="chat-filled" size="18" color="#6224ef"></uni-icons>
					<text>AI帮你写</text>
				</view>
				<view class="suggestion-item" @click="handleLocation">
					<uni-icons type="location" size="18" color="#666"></uni-icons>
					<text>{{ locationText }}</text>
                    <uni-icons type="right" size="14" color="#999"></uni-icons>
				</view>
				<view class="suggestion-item" @click="handleSearchSimilar">
					<uni-icons type="search" size="18" color="#666"></uni-icons>
					<text>搜索</text>
					<text class="search-placeholder">相似宝贝</text>
				</view>
			</view> -->

			<!-- 5. 商品规格、分类、价格、发货方式 -->
			<view class="form-section card-style">
				<!-- <view class="form-item" @click="goToSpecs">
					<text class="item-label">商品规格</text>
					<view class="item-value-wrapper">
						<text class="item-value placeholder">非必填, 设置多个颜色、尺码等</text>
						<uni-icons type="right" size="16" color="#C0C4CC"></uni-icons>
					</view>
				</view> -->

                <!-- 分类选择 -->
                <view class="form-item">
                    <text class="item-label">分类</text>
                    <view class="item-value-wrapper">
                         <!-- uni-data-select 组件 -->
                        <uni-data-select
                            v-model="categoryId"
                            :localdata="categoryList"
                            :clear="false"
                            placeholder="请选择分类"
                             @change="onCategoryChange"
                             :hide-load-more="true"
                             class="category-select"
                        ></uni-data-select>
                        <!-- uni-data-select 自带箭头，无需额外图标 -->
                    </view>
                </view>


				<!-- 价格输入 -->
				<view class="form-item price-input-item">
					<text class="item-label">价格</text>
					<view class="item-value-wrapper">
                        <text class="price-symbol">¥</text>
						<uni-easyinput
                            class="price-input"
                            type="digit"
                            v-model="price"
                            placeholder="请输入价格"
                            :clearable="false"
                            :inputBorder="false"
                            textAlign="right"
                            @focus="priceInputFocus = true"
                            @blur="priceInputFocus = false"
                        ></uni-easyinput>
					</view>
				</view>

				<view class="form-item price-input-item">
					<text class="item-label">地区</text>
					<view class="item-value-wrapper">
						<picker mode="region" @change="bindLocationChange" :value="locationArray">
							<view class="profile-item">
								<!-- <text class="item-label">地区</text> -->
								<view class="item-content">
									<text class="item-value" :class="{'link-style': !location}">
										{{ location || '去选择' }}
									</text>
									<uni-icons type="right" size="16" color="#C0C4CC"></uni-icons>
								</view>
							</view>
						</picker>
						<!--
						<uni-easyinput
                            class="location-input" v-model="location"
                            placeholder="请输入地区" :clearable="false"
                            :inputBorder="false" textAlign="right"
                            @focus="locationInputFocus = true" @blur="locationInputFocus = false"></uni-easyinput>
						-->
					</view>
				</view>

				<!-- 发货方式选择入口 -->
				<view class="form-item" @click="openShippingPopup">
					<text class="item-label">发货方式</text>
					<view class="item-value-wrapper">
						<text class="item-value">{{ shippingMethodText }}</text>
						<uni-icons type="right" size="16" color="#C0C4CC"></uni-icons>
					</view>
				</view>

                <!-- 运费输入，仅在选择“一口价”时显示 -->
                <view class="form-item shipping-fee-item" v-if="shippingMethod === 'fixed'">
					<text class="item-label">运费</text>
					<view class="item-value-wrapper">
                        <text class="price-symbol">¥</text>
						<uni-easyinput
                            class="shipping-fee-input"
                            type="digit"
                            v-model="shippingFee"
                            placeholder="请输入运费"
                            :clearable="false"
                             :inputBorder="false"
                            textAlign="right"
                        ></uni-easyinput>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部留白，如果页面内容较短 -->
		<view style="height: 50rpx;"></view>

        <!-- 发货方式选择弹窗 -->
		<uni-popup ref="shippingPopup" type="bottom" background-color="#fff">
			<view class="shipping-popup-content">
				<text class="popup-title">选择发货方式</text>
                <radio-group @change="onShippingMethodChange">
                    <label class="shipping-option-item" v-for="option in shippingOptions" :key="option.value">
                        <text>{{ option.text }}</text>
                        <radio :value="option.value" :checked="option.value === shippingMethod" color="#FFC800" style="transform:scale(0.8)" />
                    </label>
                </radio-group>
				<view class="popup-actions">
					<button class="confirm-btn" @click="closeShippingPopup">确定</button>
				</view>
                <view :style="{ height: safeAreaInsetsBottom + 'px' }"></view> <!-- 底部安全区 -->
			</view>
		</uni-popup>

	</view>
</template>

<script>
// 如果你全局引入了 uni-ui 组件，这里不需要再次引入
// import uniFilePicker from '@dcloudio/uni-ui/lib/uni-file-picker/uni-file-picker.vue';
// import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';
// import uniEasyinput from '@dcloudio/uni-ui/lib/uni-easyinput/uni-easyinput.vue';
// import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue';
// import uniDataSelect from '@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue'; // 引入分类选择组件

import ENV_CONFIG from '@/config/env.js';
const app = getApp(); // 假设 app 是你的全局应用实例

export default {
	components: {
		// uniFilePicker,
		// uniIcons,
        // uniEasyinput,
        // uniPopup,
        // uniDataSelect, // 注册分类选择组件
	},
	data() {
		return {
			statusBarHeight: 0, // 状态栏高度
			customNavBarHeight: 0, // 自定义导航栏总高度
			fileList: [], // uni-file-picker 绑定的文件列表
			uploadedImageUrls: [], // 存储上传成功后的图片URL
			description: '', // 宝贝描述
			price: 0, // 价格，使用数字类型
            priceInputFocus: false, // 价格输入框是否聚焦
			shippingMethod: 'free', // 发货方式：'free', 'pickup', 'fixed'
			shippingMethodText: '包邮', // 显示的发货方式文本
            shippingFee: 0, // 运费，使用数字类型
            shippingOptions: [ // 发货方式选项列表
                { text: '包邮', value: 'free' },
                { text: '自提', value: 'pickup' },
                { text: '一口价运费', value: 'fixed' },
            ],
            locationText: '周口川汇汇太清路...', // 示例地点
			isPublishing: false, // 发布状态
            safeAreaInsetsBottom: 0, // 底部安全区高度

            // 文件上传配置
            uploadImageUrl: app.globalData.ApiConstant.Oss.upload,
			uploadHeaders: {
				token : uni.getStorageSync('token') // 从本地缓存获取token
			},
			location: '',
            // 分类数据
            categoryList: [], // 存储转换后的分类列表 { value, text }
            categoryId: null, // 选中的分类ID
		};
	},
	onLoad(e) {
		if(e.id){
			this.productId = e.id;
			this.productDetail();
		}
		// 获取系统信息，计算自定义导航栏高度和底部安全区
		const systemInfo = uni.getSystemInfoSync();
        this.statusBarHeight = systemInfo.statusBarHeight;
		this.customNavBarHeight = systemInfo.statusBarHeight;
        if (systemInfo.safeAreaInsets) {
            this.safeAreaInsetsBottom = systemInfo.safeAreaInsets.bottom;
        }

		uni.setNavigationBarTitle({
			title: '发闲置' // 尽管自定义了，最好还是设置
		});

        // 加载分类列表
        this.loadCategories();
	},
	onShow(){
        // 检查登录状态
		if(!uni.getStorageSync('token')){
			//请登录
			uni.reLaunch({
				url: '/pages/tb/login',
			})
		}else{
            // 如果有需要，可以在这里刷新一些用户相关信息
			// this.userInfo = uni.getStorageSync('userInfo')
		}
	},
	computed:{
		locationArray() {
			if (this.location) {
				return this.location.split(' ');
			}
			return [];
		}
	},
	methods: {
		bindLocationChange(e) {
			this.location = e.detail.value.join(' '); // value 是一个数组 ['省', '市', '区']
		},

		loadProductDetail(){
			app.globalData.Request.post(app.globalData.ApiConstant.Product.detail, {productId: this.productId}).then((res)=>{
				if(res.success){
					this.price = res.data.price;
					this.description = res.data.description;
					if(res.data.imageUrls){
						// 将图片转为列表对象格式
						for(let item of res.data.imageUrls.split(',')){
							this.fileList.push({
								url: item,
								name: item.split('/')[item.split('/').length -1],
								path: item,
								extname: item.split('\\.')[1],
							})
						}
						
					}

				}else{
					// 提示错误,返回上一页
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					uni.navigateBack()
				}
			})
		},
        // 加载分类列表
        loadCategories() {
            app.globalData.Request.post(app.globalData.ApiConstant.Category.list, {}, {showLoad : false}).then(res => {
                console.log('Category list API response:', res);
                if (res.success && res.data && Array.isArray(res.data)) {
                    // 将后端返回的 { id, name } 格式转换为 { value, text }
                    this.categoryList = res.data.map(item => ({
                        value: item.id, // 假设分类ID是 number 或 string
                        text: item.name
                    }));
                    // 如果有默认选中逻辑，可以在这里设置 this.categoryId
                    // 例如：this.categoryId = this.categoryList[0]?.value; // 默认选中第一个
                } else {
                    uni.showToast({ title: res.message || '加载分类失败', icon: 'none' });
                     this.categoryList = []; // 确保是空数组
                }
            }).catch(err => {
                console.error('Load categories API error:', err);
                uni.showToast({ title: '加载分类失败', icon: 'none' });
                 this.categoryList = []; // 确保是空数组
            });
        },
        // 分类选择改变时
        onCategoryChange(value) {
            console.log('Selected category ID:', value);
            this.categoryId = value; // v-model 已经做了，这里日志确认

             // 如果需要显示分类文本，可以在这里更新
             // const selectedOption = this.categoryList.find(item => item.value === value);
             // if (selectedOption) {
             //     // this.categoryText = selectedOption.text; // 如果模板中需要显示文本
             // }
        },

		goBack() {
			// 检查是否有内容，有内容则询问用户是否放弃编辑
            if (this.fileList.length > 0 || this.description.trim() || parseFloat(this.price) > 0 || (this.shippingMethod === 'fixed' && parseFloat(this.shippingFee) > 0) || this.categoryId !== null) { // 增加分类是否已选的判断
                uni.showModal({
                    title: '确认退出',
                    content: '退出后当前编辑的内容将不会保存，是否确认退出？',
                    cancelText: '取消',
                    confirmText: '确定',
                    success: (res) => {
                        if (res.confirm) {
                            uni.navigateBack(); // 返回上一页
                        }
                    }
                });
            } else {
                 uni.navigateBack(); // 没有内容直接返回
            }
		},
		// uni-file-picker 相关事件 - 调整为手动上传逻辑
        // 选择图片后，不自动上传，而是添加到 fileList
		selectImage(e) {
			console.log('选择文件：', e);
			// 根据所选图片的个数，多次调用上传函数
			let promises=[]
			for (let i = 0; i < e.tempFilePaths.length; i++) {
				const promise =this.uploadFiles(e.tempFilePaths,i)
				promises.push(promise)
			} 
			Promise.all(promises).then(()=>{	
			})
			// e.tempFilePaths 是一个数组，包含本地文件路径
			// uni-file-picker 会自动开始上传
		},
		// 上传函数
		async uploadFiles(tempFilePaths,i){
			let that =this
			console.log(tempFilePaths, i)
			console.log(that.uploadImageUrl)
			console.log(uni.getStorageSync('token'))
			await uni.uploadFile({
				url: ENV_CONFIG['wx_dev'].requestBaseUrl + that.uploadImageUrl, //后端用于处理图片并返回图片地址的接口
				filePath: tempFilePaths[i],
				name: 'file',
				header: {
					'token': uni.getStorageSync('token')
				},
				success: res => {
					let data=JSON.parse(res.data) //返回的是字符串，需要转成对象格式
					if(data.code==0 && data.msg === 'success'){
						let url = data.url
						this.fileList.push({
							url: data.url,
							name: data.name,
							path: url,
							extname: url.split('\\.')[1],
						})
						console.log(this.fileList)
						// that.form.attachment.push(data.data)
						if(i==tempFilePaths.length-1){
							// this.form.attachment=JSON.stringify(this.form.attachment);
						}
					}
				},fail: () => {
					console.log("err");
				}   
			})   
			
		},
        // 手动选择和上传文件的入口，用于 auto-upload="false"
        chooseAndUploadFiles() {
            // 调用 filePicker 的 choose 方法选择文件
            this.$refs.filePicker.chooseFiles();
            // 选择完成后，文件会进入 fileList，但状态是 ready
            // 当点击发布时，统一触发上传
        },
		uploadProgress(e) {
			console.log('上传进度：', e);
			// e.progress 是当前总的上传进度百分比
			// e.index 是当前正在上传的文件索引
		},
		uploadSuccess(e) {
			console.log('上传成功：', e);
			// e.tempFiles 是一个数组，包含每个上传成功文件的信息
			// uni-file-picker 会自动将 url 和 status:'success' 合并到 this.fileList 中对应文件对象上

			// 从 fileList 中过滤出上传成功的图片 URL 并存储
			this.uploadedImageUrls = this.fileList
				.filter(item => item.url && item.status === 'success')
				.map(item => item.url);
            console.log('Current uploadedImageUrls:', this.uploadedImageUrls);

		},
		uploadFail(e) {
			console.log('上传失败：', e);
			// e.detail 包含失败信息
			uni.showToast({ title: '上传失败', icon: 'none' });
             // 可以在失败后，找到失败的文件，手动触发重试或提供重试按钮
             // e.tempFiles 包含了导致失败的文件列表
		},
		deleteImage(e) {
			console.log('删除文件：', e);
			// e.tempFile 是被删除的文件信息，包含 uuid, path, url (如果已上传)
			// uni-file-picker 内部会从 fileList 中移除该文件

			// 同步 updatedImageUrls 在 nextTick 中执行，确保 fileList 已更新
			this.$nextTick(() => {
				this.uploadedImageUrls = this.fileList
					.filter(item => item.url && item.status === 'success')
					.map(item => item.url);
                console.log('After deletion, current uploadedImageUrls:', this.uploadedImageUrls);
			});

			// 如果是已上传的文件被删除，可能需要调用后端接口删除服务器上的文件
			// if (e.tempFile && e.tempFile.url) {
			// 	console.log('Calling API to delete server file:', e.tempFile.url);
			// 	// 假设你的后端OSS删除接口是 app.globalData.ApiConstant.Oss.delete 并接收文件URL
			// 	// app.globalData.Request.post(app.globalData.ApiConstant.Oss.delete, { url: e.tempFile.url }).then(...).catch(...);
			// }
		},

		// 底部建议/工具条点击事件 (保持不变)
		handleAiWrite() { uni.showToast({ title: 'AI帮我写 (待实现)', icon: 'none' }); },
		handleLocation() { uni.showToast({ title: '选择位置 (待实现)', icon: 'none' }); },
		handleSearchSimilar() {
			console.log('fileList for search:', this.fileList);
			uni.showToast({ title: '搜索相似宝贝 (待实现)', icon: 'none' });
		},

		// 表单项点击跳转 (模拟)
		goToSpecs() {
            uni.showToast({ title: '编辑商品规格 (待实现)', icon: 'none' });
            // 实际跳转到规格编辑页，编辑完成后通过事件或回调传回规格数据
        },

		// 发货方式选择弹窗 (保持不变)
		openShippingPopup() { this.$refs.shippingPopup.open('bottom'); },
        closeShippingPopup() { this.$refs.shippingPopup.close(); },
        onShippingMethodChange(e) {
            this.shippingMethod = e.detail.value;
            const selectedOption = this.shippingOptions.find(opt => opt.value === this.shippingMethod);
            if (selectedOption) {
                this.shippingMethodText = selectedOption.text;
            }
            if (this.shippingMethod !== 'fixed') {
                this.shippingFee = 0;
            }
            console.log('Selected shipping method:', this.shippingMethod, this.shippingMethodText);
            // this.closeShippingPopup(); // 选择即关闭
        },


		// 发布商品
		async publish() {
			if (this.isPublishing) return;

			// 1. 校验数据
			if (this.fileList.length === 0) {
				uni.showToast({ title: '请上传商品图片', icon: 'none' });
				return;
			}
            // 检查是否有未上传或上传失败的图片，并手动触发上传
            // const pendingFiles = this.fileList.filter(item => !item.url);
            // if (pendingFiles.length > 0) {
            //      uni.showToast({ title: '正在上传图片，请稍候...', icon: 'none' });
            //      console.log('Triggering upload for pending files...');
            //      // 触发未上传或失败文件的上传
            //      this.$refs.filePicker.upload();
            //      return; // 等待上传成功后再点击发布
            // }


			if (!this.description.trim()) {
				uni.showToast({ title: '请填写宝贝描述', icon: 'none' });
				return;
			}
            if (this.categoryId === null || this.categoryId === undefined) { // 校验分类是否已选
                 uni.showToast({ title: '请选择商品分类', icon: 'none' });
                 return;
            }
			if (parseFloat(this.price) <= 0) { // 使用 parseFloat 转换并校验
				uni.showToast({ title: '请填写有效的价格 (大于0)', icon: 'none' });
				return;
			}
            if (this.shippingMethod === 'fixed' && (parseFloat(this.shippingFee) < 0 || isNaN(parseFloat(this.shippingFee)))) { // 校验一口价运费非负且是数字
                uni.showToast({ title: '请填写有效的运费 (非负)', icon: 'none' });
                return;
            }



			// 2. 准备提交的数据
			const imageUrlsString = this.fileList.map(item => item.url).join(','); // 使用已上传文件的url拼接
			console.log('Image URLs to submit:', imageUrlsString);

			const postData = {
				categoryId: this.categoryId, // 提交选中的分类ID
				// TODO: userId - 当前用户ID (通常后端从 token 获取)
				title: this.description.trim().substring(0, 30) || '宝贝', // 示例：用描述的前一部分作为标题，或默认标题
				description: this.description.trim(),
				price: parseFloat(this.price), // 确保价格是浮点数
				shippingFee: this.shippingMethod === 'fixed' ? parseFloat(this.shippingFee) : 0, // 一口价时使用运费，否则为0
				isFreeShipping: this.shippingMethod === 'free' ? 1 : 0, // 1包邮，0不包邮
				isSelfPickup: this.shippingMethod === 'pickup' ? 1 : 0, // 1自提，0非自提
				imageUrls: imageUrlsString, // 图片URL字符串
				location: this.location,
				// TODO: location - 需要从 handleLocation 获取并添加到这里
				// TODO: specs - 需要从 goToSpecs 获取并添加到这里
				// TODO: 其他字段如 brand, model, source, isNegotiable 等
			};

			console.log('Submitting data:', postData);

			// 3. 调用发布 API
			this.isPublishing = true;
			uni.showLoading({ title: '发布中...' });

			// app.globalData.ApiConstant.Product.publish 需要是你后端发布商品的接口地址
			app.globalData.Request.post(app.globalData.ApiConstant.Product.publish, postData, {
                 showLoad: false // 手动控制 loading
            }).then(res => {
				console.log('Publish API response:', res);
				uni.hideLoading();
				if (res.success) {
					uni.showToast({ title: '发布成功', icon: 'success' });
					setTimeout(() => {
						// 切换到首页
						uni.reLaunch({ url: '/pages/tb/home/home' });
					}, 1000);
				} else {
					uni.showToast({ title: res.message || '发布失败', icon: 'none' });
				}
			}).catch(err => {
				console.error('Publish API error:', err);
				uni.hideLoading();
				uni.showToast({ title: '发布失败，请稍后重试', icon: 'none' });
			}).finally(() => {
				this.isPublishing = false; // 恢复发布按钮状态
			});
		},
		
	}
};
</script>

<style lang="scss" scoped>
.publish-page {
	background-color: #f7f8fa; // 页面背景色
	min-height: 100vh;
	padding-bottom: 40rpx; // 底部留白
}

/* 1. 自定义顶部导航栏 */
.custom-nav-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 44px; // 通常的导航栏高度
	// padding-top 由 js 动态绑定
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: content-box; // 确保padding不影响高度计算
	z-index: 999;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03); // 可选：加点阴影

	.nav-title {
		font-size: 17px;
		font-weight: bold;
		color: #333;
		flex-grow: 1; // 标题居中
		text-align: center;
		transform: translateX(-10px); // 微调标题位置，因为右侧有按钮宽度
	}

	.publish-btn {
		background-color: #ffe431; // 闲鱼黄
		color: #303133;
		font-size: 14px;
		padding: 0 15px;
		height: 32px;
		line-height: 32px;
		border-radius: 16px;
		font-weight: bold;
		border: none; // 移除默认边框
		&::after { border: none; }
		&:active {
			opacity: 0.8; // 点击态
		}
		&:disabled {
			background-color: #f0f0f0;
			color: #aaa;
		}
	}
}
// 顶部导航栏占位的高度由js动态计算并绑定

.content-area {
    padding-top: 20rpx; // 内容区域顶部留白，与导航栏有视觉分隔
}

/* 2. 图片上传区域 */
.image-upload-section1 {
	padding: 0 24rpx; // 与下方卡片对齐
	margin-bottom: 20rpx;
    display: flex; // 使用flex布局
    flex-wrap: wrap; // 允许换行

	::v-deep .uni-file-picker {
		.uni-file-picker__header {
			display: none; // 隐藏默认头部 (标题和计数)
		}
		.uni-file-picker__files {
            display: flex;
            flex-wrap: wrap;
            width: 100%; // 占满父flex容器

			.uni-file-picker__files-box {
				width: calc(33.33% - 16rpx); // 3列布局，减去间距 (24rpx / 3 * 2)
				margin-right: 24rpx;
				margin-bottom: 24rpx;
				&:nth-child(3n) {
					margin-right: 0; // 每行最后一个无右边距
				}
                // 使图片框成为正方形
                height: 0 !important; // 取消默认高度
                padding-bottom: calc(33.33vw - 16rpx - 48rpx / 3) !important; // 根据父容器宽度和列数计算高度，vw是屏幕宽度，48rpx是content-area的左右padding (24*2)
                 // Simplified, based on padding-bottom: 100%
                 height: 0 !important;
                 padding-bottom: 100% !important;
			}
		}

		.file-picker__box { // upload box style (when mode="grid")
			width: 100%; // 占满 file-picker__files-box
			height: 0;
			padding-bottom: 100%; // 宽高比1:1
			position: relative;
			border: 1px dashed #d9d9d9;
			border-radius: 10rpx;
			background-color: #f8f8f8; // 浅灰色背景
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 24rpx;

			.upload-box { // This custom box is likely not needed with mode="grid"
                // The default style of .file-picker__box is already the upload area
                // If you need custom appearance, you would put this inside the uni-file-picker slot like:
                // <template v-slot:default>...</template>
                // Keeping the style for now, but it might not apply to the default rendering
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			.upload-text {
				margin-top: 5rpx;
				line-height: 1.2;
			}
		}
		.uni-file-picker__file { // 图片预览框样式
			border-radius: 10rpx;
			overflow: hidden;
            // 使预览图片框成为正方形
            height: 0 !important;
            padding-bottom: 100% !important;
		}
        .uni-file-picker__image { // 图片预览本身
             width: 100%;
             height: 100%;
             position: absolute; // 绝对定位在父容器 (.uni-file-picker__file) 中
             top: 0;
             left: 0;
             object-fit: cover; // 确保图片填充容器并保持比例
        }
         .uni-file-picker__item { // 整个图片项容器 (包括图片和删除按钮)
            // 确保删除按钮位置正确
            .is-loading {
                top: unset;
                right: unset;
                bottom: 5px; // 调整位置
                left: 5px;
                transform: none;
                 width: 24px;
                 height: 24px;
                 border-radius: 50%;
                 background-color: rgba(0, 0, 0, 0.5);
                 color: #fff;
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 // iconfont 默认有个transform，需要取消
                 .uniui-spinner-cycle {
                     transform: none !important;
                 }
            }
             .file-picker__mask { // 错误遮罩
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0.5);
                color: #fff;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                z-index: 1;
                 .icon-del {
                    font-size: 24px;
                    margin-bottom: 5px;
                 }
             }
             .file-picker__del { // 删除按钮
                 top: 5px; // 调整位置
                 right: 5px;
                 width: 24px;
                 height: 24px;
                 border-radius: 50%;
                 background-color: rgba(0, 0, 0, 0.5);
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 z-index: 1;
                 .icon-del-box {
                     font-size: 12px;
                     color: #fff;
                 }
             }
        }
	}
    // 手动触发上传区域样式 (如果 auto-upload="false")
    .upload-trigger {
        width: calc(33.33% - 16rpx); // 3列布局
		margin-right: 24rpx;
		margin-bottom: 24rpx;
         // &:nth-child(3n + ?): 这里的 nth-child 需要根据 fileList 的数量动态判断
        height: 0;
        padding-bottom: calc(33.33vw - 16rpx - 48rpx / 3); // 与图片框高度一致
        border: 1px dashed #d9d9d9;
        border-radius: 10rpx;
        background-color: #f8f8f8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 24rpx;
         // Position adjustment if needed
        // position: absolute; top: 0; left: 0; width: 100%; height: 100%;
         .upload-text {
				margin-top: 5rpx;
				line-height: 1.2;
			}
    }
}

/* 3. 描述输入区域 */
.description-section {
	margin: 0 24rpx 20rpx; // 上下左右留白
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;

	.description-textarea {
		width: 100%; // 占满容器
		min-height: 200rpx; // 最小高度
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
        box-sizing: border-box; // 确保padding不影响宽度
		// uni自带textarea的placeholder样式可以通过::placeholder修改
		::placeholder {
			color: #c0c4cc;
		}
	}
}

/* 4. 底部建议/工具条 */
.suggestion-bar {
	display: flex;
	align-items: center;
	margin: 0 24rpx 20rpx;
	padding: 20rpx 0; // 上下padding
	border-top: 1rpx solid #eee;
	border-bottom: 1rpx solid #eee;

	.suggestion-item {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666;
		margin-right: 30rpx;
        flex-shrink: 0; // 防止被挤压
		&:first-child {
			// AI 帮你写 样式特殊
			background: linear-gradient(to right, #e6e6ff, #f5e6ff); // 渐变背景
			border-radius: 25rpx;
			padding: 8rpx 15rpx;
			margin-right: auto; // 推到最左边
			color: #6224ef; // 紫色文字
			uni-icons {
				margin-right: 8rpx;
			}
			text {
				font-weight: bold;
			}
		}
        &:last-child {
            margin-right: 0; // 最后一个无右边距
             uni-icons {
                margin-right: 8rpx;
            }
             .search-placeholder {
                color: #999;
                margin-left: 5rpx;
             }
        }


		uni-icons {
			margin-right: 5rpx; // 图标和文字的间距
		}
	}
}

/* 5. 商品规格、分类、价格、发货方式 */
.form-section {
	// card-style 提供了基础样式
	.form-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0; // 左右padding由card-style提供
		position: relative;

		&:not(:last-child)::after { // 分割线
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 1px;
			background-color: #f5f5f5; // 分割线颜色
			transform: scaleY(0.5);
		}

		.item-label {
			font-size: 28rpx;
			color: #303133;
            flex-shrink: 0; // 防止被挤压
            margin-right: 20rpx;
             width: 120rpx; // 固定 label 宽度方便对齐
		}

		.item-value-wrapper {
			display: flex;
			align-items: center;
			color: #909399;
            flex-grow: 1; // 占据剩余空间
            justify-content: flex-end; // 靠右对齐
            min-width: 0; // 防止内部元素撑开超出flex容器

			.item-value {
				font-size: 28rpx;
				text-align: right;
                min-width: 0; // 防止文本过长挤压图标
                word-break: break-all; // 允许断行
				&.placeholder {
					color: #c0c4cc;
				}
			}
             .price-symbol {
                 font-size: 28rpx;
                 color: #fa3534; // 价格红色
                 font-weight: bold;
                 margin-right: 5rpx;
                 flex-shrink: 0;
             }
             .price-input, .shipping-fee-input {
                 // 调整 uni-easyinput 样式以融入 form-item
                 flex-grow: 1; // 占据剩余空间
                 width: auto; // flex-grow 会控制宽度
                 ::v-deep .uni-easyinput__content {
                     padding: 0 !important; // 移除默认padding
                     height: unset !important; // 高度自适应内容
                     line-height: inherit !important; // 使用父容器行高
                     min-height: unset !important;
                     background-color: transparent !important; // 透明背景
                     border: none !important; // 无边框
                 }
                 ::v-deep input {
                     text-align: right; // 文字靠右
                     font-size: 28rpx;
                     color: #fa3534; // 价格红色
                     font-weight: bold;
                 }
                 ::v-deep .uni-easyinput__placeholder {
                    color: #c0c4cc;
                    font-weight: normal; // 占位符文字不加粗
                 }
             }
             .category-select {
                 // 调整 uni-data-select 样式
                 flex-grow: 1;
                 ::v-deep .uni-select {
                     width: 100%;
                     box-sizing: border-box;
                     padding: 0 !important; // 移除默认padding
                     font-size: 28rpx;
                     color: #303133; // 默认文字颜色
                     justify-content: flex-end; // 文字靠右对齐
                     .uni-select__placeholder {
                         color: #c0c4cc; // 占位符颜色
                         font-size: 28rpx;
                     }
                     .uni-select__input-text {
                        text-align: right; // 选中的文字靠右
                         color: #303133;
                     }
                     .uni-select__selector {
                         z-index: 1000; // 确保下拉框在最上层
                     }
                 }
             }


			uni-icons {
				margin-left: 10rpx;
                flex-shrink: 0; // 防止被挤压
			}
		}
	}
     .price-input-item .item-value-wrapper {
         align-items: baseline; // 让货币符号和价格对齐
     }
     .shipping-fee-item .item-value-wrapper {
          align-items: center;
          .shipping-fee-input ::v-deep input {
              color: #303133; // 运费不是红色
              font-weight: normal;
          }
     }
}

.card-style {
	background-color: #fff;
	border-radius: 16rpx;
	margin: 0 24rpx 0; // 与其他部分对齐
	padding: 24rpx; // 内部padding
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.03);
}

/* 发货方式选择弹窗样式 */
.shipping-popup-content {
	background-color: #fff;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	padding: 30rpx;

	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40rpx;
		display: block;
	}
	.shipping-option-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 0;
		font-size: 28rpx;
		color: #333;
		&:not(:last-child) {
			border-bottom: 1rpx solid #f5f5f5;
		}
	}
	.popup-actions {
		margin-top: 40rpx;
        // 底部安全区 padding 由外部容器或者这里的 padding-bottom + safeAreaInsetsBottom 承担
		.confirm-btn {
			background-color: #FFC800; // 闲鱼黄
			color: #333;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
             &::after { border: none; }
		}
	}
     // 底部安全区 padding 由外部容器或者在这里直接加到 .shipping-popup-content
    // 或者像取消订单弹窗那样，加一个空的 View
    // 这里的 safeAreaInsetsBottom 加到了外部 view，所以不需要额外处理
}
</style>